<template>
  <div class="login_bg">
    <div class="login_box">
      <div class="logo_box">
        <span>{{ $t('project.NAME') }}</span>
      </div>
      <div class="login_form">

        <el-form ref="loginForm" :model="loginForm" label-position="right" label-width="80px" auto-complete="on">

          <el-row>
            <el-col :span="24">
              <el-input v-model="loginForm.loginname" class="login_input" :placeholder="$t('formholder.LOGINNAME')" name="loginname" auto-complete="on" type="text" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-input v-model="loginForm.password" type="password" class="login_input" :placeholder="$t('formholder.PASSWORD')" name="password" auto-complete="on"
                @keyup.enter.native="handleLogin" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-checkbox v-model="checked" style="margin-bottom:25px;color:#565656!important;">
                {{ $t('common.REPASSWORD') }}
              </el-checkbox>
            </el-col>
            <el-col :span="4">
              <router-link to="/forgetPassword" class="forgetPassword"><span>{{ $t('common.FORGET') }}</span>
              </router-link>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button :loading="loading" type="primary" class="btn_login" @click.native.prevent="handleLogin">{{
                $t('common.LOGIN') }}
              </el-button>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import i18n from "@/lang";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        loginname: "",
        password: "",
      },
      loading: false,
      redirect: undefined,
      checked: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted: function () {
    const loginname = localStorage.getItem("loginname");
    const password = localStorage.getItem("password");
    if (loginname != null && password != null) {
      this.loginForm.loginname = loginname;
      this.loginForm.password = password;
      this.checked = true;
    }
  },
  created() {},
  destroyed() {},
  methods: {
    // 登录
    handleLogin() {
      if (this.loginForm.loginname === "") {
        this.$message({
          message: i18n.t("tips.USER_NOTNULL"),
          type: "warning",
        });
        return;
      }
      if (this.loginForm.password === "") {
        this.$message({
          message: i18n.t("tips.PWD_NOTNULL"),
          type: "warning",
        });
        return;
      }

      this.loading = true;
      this.$store
        .dispatch("doLogin", JSON.stringify(this.loginForm))
        .then((data) => {
          if (this.checked) {
            window.localStorage.setItem("loginname", this.loginForm.loginname);
            window.localStorage.setItem("password", this.loginForm.password);
          }
          this.loading = false;
          this.$message({
            message: data,
            type: "success",
          });
          // console.log(this.redirect)
          localStorage.setItem("active", 5);
          this.$router.push({ path: "/race-manage" });
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  background: #fff;
}

.login_box {
  width: 350px;
  height: 388px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -260px;
  padding: 85px 85px 127px 85px;
}

.logo_box {
  width: 100%;
  text-align: center;
  height: 63px;
  line-height: 63px;
  margin-bottom: 35px;
}

.logo_box span {
  font-size: 25px;
  color: #5399e1;
}

.login_input {
  margin-bottom: 25px;
}

.btn_login {
  width: 100% !important;
  height: 40px !important;
  background: #5399e1 !important;
  font-size: 20px !important;
  line-height: 40px !important;
  padding: 0 !important;
  font-weight: lighter !important;
}

.btn_login:hover {
  background: #5399e1 !important;
}

.btn_login:active {
  background: #337bc4 !important;
}

.login_form span {
  color: #5399e1 !important;
}

.login_note {
  text-align: center;
  margin-top: 25px;
  color: #565656;
  font-size: 14px;
}

.login_note span {
  color: #5399e1;
}

.forgetPassword {
  color: #5399e1;
  /*position: relative;*/
  /*left: 290px;*/
  /*top: -20px;*/
  font-size: 14px;
  margin-bottom: 25px;
}
</style>
